<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <text class="title">Study Journal</text>
      <view class="date-selector">
        <u-calendar
          v-model="selectedDate"
          mode="single"
          @change="onDateChange"
        ></u-calendar>
      </view>
    </view>

    <!-- Journal Content -->
    <scroll-view scroll-y class="content">
      <!-- Quick Entry Section -->
      <view class="quick-entry">
        <u-input
          v-model="quickNote"
          type="textarea"
          placeholder="Write a quick note..."
          :height="100"
        ></u-input>
        <view class="quick-entry-actions">
          <u-button type="primary" @click="saveQuickNote">Save Note</u-button>
        </view>
      </view>

      <!-- Journal Entries -->
      <view class="entries-section">
        <view class="section-header">
          <text class="section-title">Today's Entries</text>
          <u-button type="primary" size="mini" @click="createNewEntry">New Entry</u-button>
        </view>

        <view class="entries-list">
          <view 
            v-for="entry in filteredEntries" 
            :key="entry.id"
            class="entry-card"
          >
            <view class="entry-header">
              <view class="entry-time">
                <u-icon name="clock" size="24"></u-icon>
                <text>{{ entry.time }}</text>
              </view>
              <view class="entry-tags">
                <u-tag 
                  v-for="tag in entry.tags"
                  :key="tag"
                  :text="tag"
                  type="info"
                  size="mini"
                ></u-tag>
              </view>
            </view>
            <view class="entry-content">
              <text class="entry-title">{{ entry.title }}</text>
              <text class="entry-text">{{ entry.content }}</text>
            </view>
            <view class="entry-footer">
              <view class="entry-mood">
                <u-icon :name="getMoodIcon(entry.mood)" size="24"></u-icon>
                <text>{{ entry.mood }}</text>
              </view>
              <view class="entry-actions">
                <u-button type="info" size="mini" icon="edit" @click="editEntry(entry)">Edit</u-button>
                <u-button type="error" size="mini" icon="trash" @click="deleteEntry(entry)">Delete</u-button>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Statistics Section -->
      <view class="stats-section">
        <view class="section-header">
          <text class="section-title">Journal Statistics</text>
        </view>
        <view class="stats-grid">
          <view class="stat-card">
            <text class="stat-value">{{ totalEntries }}</text>
            <text class="stat-label">Total Entries</text>
          </view>
          <view class="stat-card">
            <text class="stat-value">{{ streakDays }}</text>
            <text class="stat-label">Day Streak</text>
          </view>
          <view class="stat-card">
            <text class="stat-value">{{ monthlyEntries }}</text>
            <text class="stat-label">This Month</text>
          </view>
          <view class="stat-card">
            <text class="stat-value">{{ averageMood }}</text>
            <text class="stat-label">Avg. Mood</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: new Date(),
      quickNote: '',
      entries: [
        {
          id: 1,
          time: '09:30',
          title: 'Morning Study Session',
          content: 'Completed chapter 5 of calculus. Understanding derivatives better now.',
          tags: ['Math', 'Calculus'],
          mood: 'productive',
          date: '2024-03-15'
        },
        {
          id: 2,
          time: '14:15',
          title: 'Physics Lab Preparation',
          content: 'Reviewed experimental procedures for tomorrow\'s lab session.',
          tags: ['Physics', 'Lab'],
          mood: 'focused',
          date: '2024-03-15'
        },
        {
          id: 3,
          time: '16:45',
          title: 'Group Study Review',
          content: 'Had a productive group study session for chemistry exam.',
          tags: ['Chemistry', 'Group Study'],
          mood: 'happy',
          date: '2024-03-15'
        }
      ]
    }
  },
  computed: {
    filteredEntries() {
      const date = this.selectedDate.toISOString().split('T')[0]
      return this.entries.filter(entry => entry.date === date)
    },
    totalEntries() {
      return this.entries.length
    },
    streakDays() {
      return 5 // Implement streak calculation
    },
    monthlyEntries() {
      const currentMonth = new Date().getMonth()
      return this.entries.filter(entry => 
        new Date(entry.date).getMonth() === currentMonth
      ).length
    },
    averageMood() {
      return '😊' // Implement mood average calculation
    }
  },
  methods: {
    onDateChange(date) {
      this.selectedDate = date
    },
    saveQuickNote() {
      if (!this.quickNote.trim()) return
      
      const newEntry = {
        id: this.entries.length + 1,
        time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
        title: 'Quick Note',
        content: this.quickNote,
        tags: ['Quick Entry'],
        mood: 'neutral',
        date: this.selectedDate.toISOString().split('T')[0]
      }
      
      this.entries.unshift(newEntry)
      this.quickNote = ''
      
      uni.showToast({
        title: 'Note saved',
        icon: 'success'
      })
    },
    createNewEntry() {
      uni.navigateTo({
        url: '/pages/more/journal/new-entry'
      })
    },
    editEntry(entry) {
      uni.navigateTo({
        url: `/pages/more/journal/edit-entry?id=${entry.id}`
      })
    },
    deleteEntry(entry) {
      uni.showModal({
        title: 'Confirm Delete',
        content: 'Are you sure you want to delete this entry?',
        success: (res) => {
          if (res.confirm) {
            this.entries = this.entries.filter(e => e.id !== entry.id)
            uni.showToast({
              title: 'Entry deleted',
              icon: 'success'
            })
          }
        }
      })
    },
    getMoodIcon(mood) {
      const icons = {
        'happy': 'smile',
        'productive': 'checkmark-circle',
        'focused': 'target',
        'neutral': 'minus-circle'
      }
      return icons[mood] || 'help-circle'
    }
  }
}
</script>

<style scoped>
.container {
  flex: 1;
  background-color: #f8f9fa;
}

.header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.date-selector {
  margin: 20rpx 0;
}

.content {
  flex: 1;
  padding-top: 20rpx;
}

.quick-entry {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.quick-entry-actions {
  margin-top: 20rpx;
  display: flex;
  justify-content: flex-end;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.entries-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.entry-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.entry-time {
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #666;
  font-size: 24rpx;
}

.entry-tags {
  display: flex;
  gap: 10rpx;
}

.entry-content {
  margin-bottom: 15rpx;
}

.entry-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.entry-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.entry-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15rpx;
  padding-top: 15rpx;
  border-top: 1px solid #eee;
}

.entry-mood {
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #666;
  font-size: 24rpx;
}

.entry-actions {
  display: flex;
  gap: 15rpx;
}

.stats-section {
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.stat-card {
  background-color: #f8f9fa;
  border-radius: 8rpx;
  padding: 15rpx;
  text-align: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #4b7bec;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}
</style> 